<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2020/11/11
  Time: 17:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
<script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled" <%--lay-event="edit"--%>>
        <i class="layui-icon layui-icon-edit">编辑</i>
    </button>
    <button lay-event="caozuo" class="layui-btn layui-btn-warm layui-btn-xs">操作</button>
    <%--<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
        <i class="layui-icon layui-icon-reduce-circle"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event="recover">
        恢复
    </button>--%>
</script>
<script>
    $(function () {
        layui.use(['table','form'], function(){
            var table = layui.table;
            var form=layui.form;
            table.render({
                elem: '#test' //id为test的table
                ,url:'${pageContext.request.contextPath}/gust'   //url 查询数据   所有的客户的数据
                ,title: '客户表'
               /* ,limits:[2,4,6]
                ,limit:2*/
                //data[{ id:12,name:123}]
                ,cols: [[
                    {field:'id', title:'ID',fixed: 'left', sort: true,align:'center'}
                    ,{field:'name', title:'用户名',align:'center'}
                    ,{field:'pwd', title:'密码',align:'center'}
                    ,{field:'idcard', title:'身份证号',align:'center'}
                    ,{field:'status', title:'状态', align:'center', sort: false,templet: function(res){
                            //res  这一行的内容
                            var f=res.status;//状态值
                            if(f==0){
                                //正常
                                return "正常";
                            }else{
                                return "已拉黑";
                            }
                        }
                    }
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,limit:10
                ,limits:[10,20,30]
                , done: function (res, curr, count) {
                    var that = this.elem.next();
                    res.data.forEach(function (item, index) {
                        if (item.status === 1) {
                            var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                            tr.css("background-color", "gray");//目标单元格颜色
                            tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
                        }
                    });
                }, parseData: function (res) {
                    if (res.code == -1) {
                        layuiHelp.AlertMsg(res.msg, res.icon);
                    }
                }
            });

            form.on('submit(demo2)',function (data){
                table.reload("test",{
                    page:{
                        curr:1
                    },where:data.field
                })
                return false;
            })

            $("#re").click(function (){
                location=location
            })


            //监听行工具事件  test  表格的id
            table.on('tool(test)', function(obj){
                //obj 代表 一行的内容
                var data = obj.data; //一行的数据
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        // obj.del();//页面删除
                        <%--window.location.href="${pageContext.request.contextPath}/gust?method=del&id="+data.id;--%>
                        $.ajax({
                            url:"${pageContext.request.contextPath}/gust?method=del",
                            data:{id:data.id},//name :key
                            success:function () {
                                layer.close(index);
                                table.reload('test')
                            }
                        })
                    });
                } else if(obj.event === 'edit'){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.open({
                            title:'修改信息'
                            ,type: 1
                            ,content:$('#update')
                            ,offset: '100px'
                            ,moveOut:true
                            ,area: ['500px', '450px']
                        });
                        form.val('upd', {
                            "id": data.id // "name": "value"
                            ,"name": data.name
                            ,"pwd": data.pwd
                            ,"idcard": data.idcard
                            ,"status": data.status
                        });
                    })
                }else if (obj.event === 'caozuo') {
                    /*confirmTrans: function(){*/
                    //配置一个透明的询问框
                    layer.msg('', {
                        content: $("#caozuo"),
                        closeBtn: 1,
                        time: 0,
                        cancel: function () {
                            location = location;
                        },
                        success: function () {
                            $("#hid").val(data.id)
                        }
                    });
                }


                $("#one").click(function (){
                    var id=$("#hid").val();
                    /* layer.closeAll();*/
                    $.ajax({
                        url:"${pageContext.request.contextPath}/ggust/bad",
                        data:{id:id},
                        async:false,
                        success:function (d){
                            if (d>0){
                                layer.msg("已停用")
                            }
                        },error:function (){
                            alert(55)
                        }
                    })
                    setTimeout(function() {
                        window.location.reload();
                    },400);
                })

                $("#two").click(function (){
                    var id=$("#hid").val();
                    /* layer.closeAll();*/
                    $.ajax({
                        url:"${pageContext.request.contextPath}/ggust/good",
                        data:{id:id},
                        async:false,
                        success:function (d){
                            if (d>0){
                                layer.msg("已恢复");
                            }
                        },error:function (){
                            alert(66)
                        }
                    })
                    setTimeout(function() {
                        window.location.reload();
                    },400);
                })




            });
            //点击修改ajax进行
            form.on('submit(upd)',function (data) {
                $.ajax({
                    url:"/Hotel/gust?method=upd",
                    data:data.field,
                    success:function(){
                        layer.closeAll();
                        table.reload("test");
                    },
                    error:function () {
                        layer.closeAll();
                        alert("修改失败");
                    }
                })
                return false;
            })
        });
        $("#addbtn").click(function () {
            layui.use(['layer','form','table'], function(){
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                layer.open({
                    title:'新增客户'
                    ,type: 1
                    ,content: $("#add")
                    ,offset: '100px'
                    ,moveOut:true
                    ,area: ['460px', '350px']
                });
                form.on('submit(add)',function (data) {
                    $.ajax({
                        url:"/Hotel/gust?method=add",
                        data:data.field,
                        success:function(){
                            layer.closeAll();
                            table.reload("test");
                            $('#addform')[0].reset();
                            form.render();
                        },
                        error:function () {
                            layer.closeAll();
                            alert("添加失败");
                        }

                    })
                    return false;
                })
            })
        })

    })
</script>
<html>
<head>
    <title>客户表</title>
</head>
<body>

<div id="caozuo" style="display: none">
    <input type="hidden" id="hid">
    <button id="one" class="layui-btn layui-btn-warm layui-btn-radius">拉黑</button>
    <button id="two" class="layui-btn layui-btn-danger layui-btn-radius" >恢复</button>
</div>

<%--    查询--%>
<div id="min">
    <form class="layui-form" action="" id="adataform" lay-filter="ggg">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 10px">id</label>
            <div class="layui-input-inline">
                <input type="text"  name="id" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text"  name="name" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="re">重置</button>
        </div>

    </form>
</div>



<%--增加按钮--%>
    <button type="button" class="layui-btn" id="addbtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
<%--表格--%>
    <table class="layui-hide" id="test" lay-filter="test">

    </table>

<%--修改表单--%>
    <div class="layui-row" id="update" style="display:none;">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane" lay-filter="upd"  method="post" style="margin-top:20px" >
                <div class="layui-form-item">
                        <input type="hidden"  id="id" name="id"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text"  id="name" name="name"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" id="pwd" name="pwd"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-block">
                        <input type="text"id="idcard" name="idcard"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>

                <%--<label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                </div>--%>

                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="upd" id="updatebtn">确认修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<%--增加表单--%>
    <div class="layui-row" id="add" style="display:none;">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane"  style="margin-top:20px"  lay-filter="add" id="addform">

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text"  name="name"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text"  name="pwd"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-block">
                        <input type="text" name="idcard"  required  lay-verify="required" autocomplete="off"  class="layui-input">
                    </div>
                </div>

               <%-- <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                </div>--%>

                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="add">确认添加</button>
                    </div>
                </div>


            </form>
        </div>
    </div>
</body>
</html>
